<!-- 直播间 -->
<template>
  <div class="live-room">
    <video
      id="liveRoom"
      autoplay
      muted
      playsinline
      style="object-fit: cover"
    ></video>
    <div class="chat-container">
      <!-- <div class="shadow"></div> -->
      <div class="messages">
        <div v-for="(msg, index) in messages" :key="index" class="message">
          <strong class="name">{{ msg.sender }}:</strong>
          <span class="word"> {{ msg.content }}</span>
        </div>
      </div>
      <div class="message-input">
        <div class="input">
          <img src="@/assets/images/chat-s.svg" alt="" />
          <input
            v-model="newMessage"
            placeholder="说点什么"
            @keyup.enter="sendMessage"
          />
        </div>
        <div class="gift-box">
          <div class="gift img" @click="showGiftList">
            <img src="../assets/images/gift.svg" alt="" />
          </div>
          <div class="effect img">
            <img src="../assets/images/effect.svg" alt="" />
          </div>
        </div>
        <!-- <button @click="sendMessage">发送</button> -->
      </div>
    </div>
    <GiftBox :visible="isShowGift" @close="showGiftList" />
  </div>
</template>

<script setup lang="ts">
import GiftBox from "@/components/GiftBox.vue";
import { useRoute } from "vue-router";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import useZego from "../composables/useZego";
const currentRoute = useRoute();
const roomID = ref(); // 房间ID
const role = ref(); // 角色，主播，观众
roomID.value = currentRoute.params.id;
role.value = currentRoute.query.role;
const userID = ref("0001");
const userName = ref("userName0001");

const messages = reactive([
  {
    sender: "test",
    content: "adfdfdfdsfd",
  },
  {
    sender: "test1",
    content: "adfdfdfdfdasssssssssssssssssssssssssssssssssssssssssssssssssfd",
  },
  {
    sender: "test",
    content: "adfdfdfdsfd",
  },
  {
    sender: "test1",
    content: "adfdfdfdfdasssssssssssssssssssssssssssssssssssssssssssssssssfd",
  },
  {
    sender: "test",
    content: "adfdfdfdsfd",
  },
  {
    sender: "test1",
    content: "adfdfdfdfdasssssssssssssssssssssssssssssssssssssssssssssssssfd",
  },
]);
const newMessage = ref();

// const info = JSON.parse('info')

const zego = useZego();

const localStream = ref(null);

const startLive = async () => {
  try {
    await zego.initSDK(userID.value, userName.value);
    localStream.value = await zego.startLive(
      roomID.value,
      userID.value,
      userName.value
    );
  } catch (error) {
    console.error("Start live failed:", error);
  }
};

const stopLive = async () => {
  await zego.destroyLive();
  localStream.value = null;
};

const sendMessage = () => {};

const isShowGift = ref(false);
const showGiftList = () => {
  isShowGift.value = !isShowGift.value;
};

onMounted(() => {
  if (role.value === "host") {
    startLive();
  }
});
onUnmounted(stopLive);
</script>

<style lang="less" scoped>
.live-room {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.1);
  #liveRoom {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .chat-container {
    position: absolute;
    bottom: 0;
    left: 0;
    // padding: 0 15px;
    // padding-bottom: 30px;
    /* Webkit浏览器滚动条样式 */
    .messages::-webkit-scrollbar {
      width: 6px;
    }
    .messages::-webkit-scrollbar-track {
      background: #333;
    }
    .messages::-webkit-scrollbar-thumb {
      background-color: #555;
      border-radius: 3px;
    }
    .messages {
      // max-height: 200px;
      width: 65%;
      padding: 5px 15px;
      height: 150px;
      // background: #f60;
      // background-image: linear-gradient(
      //   to bottom,
      //   rgba(0, 0, 0, 0.1),
      //   rgba(0, 0, 0, 0)
      // );
      position: relative;
      flex: 1; /* 占据剩余空间 */
      overflow-y: auto; /* 垂直滚动 */
      // scrollbar-width: thin; /* Firefox */
      // scrollbar-color: #555 #333; /* Firefox */
      .message {
        font-size: 12px;
        line-height: 14px;
        padding: 8px 10px;
        white-space: wrap;
        word-break: break-all;
        margin: 5px 0;
        background: rgba(51, 51, 51, 0.5);
        border-radius: 17px;
        .name {
          color: #00f69d;
          padding: 0 5px;
        }
        .word {
          color: #fff;
        }
      }
    }
    .message-input {
      display: flex;
      justify-content: space-between;
      // margin-top: 10px;
      padding: 10px 15px;
      // background: rgba(0,0,0,0.2);
      background: rgba(51, 51, 51, 0.8);
      .input {
        width: 65%;
        border-radius: 16px;
        padding: 0 10px;
        // background: rgba(0, 0, 0, 0.3);
        background: rgba(95, 95, 95, 0.8);
        display: flex;
        img {
          width: 20px;
          margin-right: 5px;
        }
        input {
          background-color: transparent;
          border: none;
          outline: none;
          color: #fff;
          font-size: 12px;
          height: 32px;
          width: 60px;
        }
      }
    }
    .gift-box {
      display: flex;
      .img {
        display: flex;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 100%;
        padding: 5px 5px;
        margin-left: 10px;
        img {
          max-width: 22px;
        }
      }
    }
  }
}
</style>
